<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>VueJs指令：v-on：事件修饰符</title>
</head>
<body>

<div id="app">
    <p>用户：<input type="text" v-model="username"></p>
    <p>密码：<input type="text" v-model="password"></p>
    <p><button @click="logined">登录</button> </p>
</div>

<script src="js/vue.min.js"></script>
<script >
    // 指令：v-model
    // vue: 去dom化，
    new Vue({
        el:"#app",
        data:{
            username:"",
            password:""
        },
        methods:{
            logined:function(){
                // js
                //var username = getVal("username").value;
                //var password = getVal("password").value;
                //
                var username = this.username;// this.$data.username
                var password = this.password; // this.$data.password
                console.log(username,password)
            }
        }
    })

    function getVal(id){
        return document.getElementById(id);
    }
</script>

</body>
</html>